<template>
    <div class="dinger-shopping-examine">
        <c-title text="考核情况"></c-title>
        <div class="flex-a-c flex-j-sb choose" @click="showDate = true">
            <span class="time">{{ currentMonthYear }}</span>
            <i class="iconfont icon-icon_down1"></i>
        </div>
        <div class="merchant">
            <div class="merchant-name">{{ store_name }}</div>
            <div class="total flex-column">
                <div class="tips">本月总流水</div>
                <div class="total-money">¥{{ total }}</div>
            </div>
        </div>
        <div>
        </div>
        <div class="box">
            <div class="date">
                <div v-for="item in date" style="color: #AAAAB3;line-height: 1;" class="f-14">{{ item }}</div>
                <div v-for="item in placeholder" :key="cell" class="grid-cell"> </div>
                <div v-for="cell in total_date" :key="cell" class="grid-cell flex-column">
                    <div :class="{ 'not': cell.is_finished == 0 }"
                        class='cell-item'>{{ cell.date.split('-')[2] }}</div>
                    <div :class="{'main-color':cell.is_finished==0 }"
                        style="font-size: .5625rem;max-width: 2.625rem;line-height: 1;">{{cell.flag?'&nbsp;': cell.amount }}</div>
                    </div>

                </div>
                <div class="tips-date">注：标红的表示该日的考核不达标</div>
            </div>
            <van-popup round v-model="showDate" position="bottom">
                <van-datetime-picker v-model="currentDate" @cancel="showDate=false" @confirm="confirm" title="选择年月"
                    :min-date="minDate" :max-date="maxDate" type="year-month" />
            </van-popup>
        </div>
</template>

<script>
export default {
    data() {
        return {
            showDate: false,
            placeholder: 0,
            total_grid_count: 49,
            total_date: 0,
            date: ['日', '一', '二', '三', '四', '五', '六'],
            currentMonthYear: '',
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(new Date().getFullYear() + 10, 10, 1),
            currentDate: new Date(),
            total: '',
            store_name: "",
            current_date: "",
        };
    },
    activated() {
        this.init()
        this.getData();
    },
    methods: {
        init() {
            this.store_id = this.$route.params.store_id;
            // this.year = this.$route.params.year;
            // this.month = this.$route.params.month;
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            const date = new Date(year, month, 1);
            const dayOfWeek = this.date[date.getDay()];
            this.placeholder = this.date.findIndex((item) => item === dayOfWeek);
            this.currentMonthYear = `${year}.${String(month + 1 < 10 ? '0' + (month + 1) : month + 1)}`;
            this.year = year;
            this.month = month + 1;
            this.current_date = now.getDate();

        },
        getData() {
            let json = {
                store_id: this.store_id,
                year: this.year,
                month: this.month
            };
            $http.post('plugin.zhixianggou.api.merchant.income-detail', json, '.').then(res => {
                if (res.result) {
                    this.total = res.data.total;
                    this.store_name = res.data.store_name;
                    let now = new Date();
                    let year = now.getFullYear();
                    let month = now.getMonth() + 1;
                    let day = now.getDate()
                    res.data.detail.forEach(item=>{
                        if(item.date.split('-')[0]*1>year){
                            item.flag = true;
                            item.is_finished = 1;
                        }
                        if(item.date.split('-')[1]*1>month){
                            item.flag = true;
                            item.is_finished = 1;
                        }
                        if(item.date.split('-')[2]*1>day&&item.date.split('-')[0]*1==year&&item.date.split('-')[1]*1==month){
                            item.flag = true;
                            item.is_finished = 1;
                        }
                    })
                    this.total_date =  res.data.detail;
                } else {
                    this.$toast(res.msg);
                }
            })
        },

        confirm(value) {
            this.placeholder = [];
            this.total_date = [];
            console.log(value, 'value===');
            const now = new Date(value);
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            this.year = year;
            this.month = month;
            this.getData()
            const date = new Date(year, month - 1, 1); // 修改为上个月的第一天
            const dayOfWeek = this.date[date.getDay()];
            this.placeholder = this.date.findIndex((item) => item === dayOfWeek);
            this.currentMonthYear = `${year}.${month < 10 ? ('0' + month) : month}`;
            this.showDate = false;
        },
    }
};
</script>

<style scoped lang='scss'>
.main-color {
    color: #F15353;
}

.dinger-shopping-examine {
    .cell-item {
        padding: .2188rem .3125rem;
        margin-bottom: .3125rem;
        box-sizing: border-box;
    }

    .not {
        background-color: #F15353;
        color: #fff;
        min-width: 1.5625rem;
        ;
        border-radius: .375rem;
    }

    .tips-date {
        font-weight: 400;
        font-size: .75rem;
        color: #F15353;
        text-align: left;
        padding-bottom: .9375rem;
        padding-left: .75rem;
    }

    .box {
        background: #FFFFFF;
        margin: .625rem .75rem;
        border-radius: .5rem;
    }

    .date {
        display: grid;
        font-size: .875rem;
        grid-template-columns: repeat(7, 1fr);
        gap: 1.25rem 0.375rem;
        padding: 1rem .75rem;

        .grid-cell {
            border-radius: .3125rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .875rem;
            color: #00001C;
            /* 设置单元格高度 */
        }
    }

    .total-money {
        font-size: 1.25rem;
        color: #00001C;
        margin-top: .5938rem;
    }

    .tips {
        font-weight: 400;
        font-size: .875rem;
        color: #6E6E79;
    }

    .merchant {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: .625rem;
        margin: .625rem .75rem;

        .merchant-name {
            font-size: .9375rem;
            text-align: left;
            line-height: 1;
            padding: .125rem;
            margin-bottom: .625rem;
            color: #00001C;
        }

        .total {
            background: #F5F5F5;
            line-height: 1;
            padding: 1.125rem 0 1.0313rem;
            border-radius: .625rem;
        }
    }

    .choose {
        margin: .625rem .75rem;
        border-radius: .5rem;
        background-color: #fff;
        padding: .875rem .625rem;

        .time {
            font-weight: 500;
            font-size: 1rem;
            color: #00001C;
        }

        .icon-icon_down1 {
            color: #AAAAB3;
        }
    }
}
</style>